<template>
  <a-drawer
    :visible="visible"
    placement="right"
    @close="cancel"
    :width="$store.getters.isMobile ? 350 : 1000"
    :keyboard="false"
    :body-style="{
      height: 'calc(100% - 110px)',
      boxSizing: 'border-box',
      overflowY: 'auto',
    }"
    destroyOnClose
  >
    <template #title>
      <!--      <a-tabs v-model:activeKey="activeTab">
        <a-tab-pane
          v-for="item of tabList"
          :key="item.key"
          :tab="item.text"
        ></a-tab-pane>
      </a-tabs>-->
      {{ id ? '编辑业户' : '添加业户' }}
    </template>
    <div style="width: 100%">
      <NewTenantsAdded
        v-if="visible"
        :visible="visible"
        :id="id"
        :type="type"
        @btnok="btnokes"
        @cancel="cancel"
      />
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, ref, computed, watch, toRefs } from "vue";
import request from "@/common/utils/request";
import { message, Tooltip } from "ant-design-vue";
import store from "@/store";
import utils from "@/common/utils/utils";
import NewTenantsAdded from "@/views/village/OwnerManage/modules/NewTenantsAdded.vue";

export default defineComponent({
  name: "OwnerContEdit",
  components: {
    NewTenantsAdded,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: 0,
    },
    type: {
      type: [String, Number],
      default: 0,
    },
  },
  setup(props, context) {
    // 取消按钮
    const cancel = () => {
      context.emit("cancel");
    };

    const btnokes = () => {
      context.emit("btnok");
    };

    return {
      labelCol: { span: 2 },
      cancel,
      btnokes,
    };
  },
});
</script>

<style lang="less" scoped>
/*:deep(.ant-tabs-bar) {
  border-bottom: none !important;
  margin-bottom: 1px;
}
:deep(.ant-tabs-tab) {
  padding: 18px;
}
:deep(.ant-form-item-label > label) {
  width: 100% !important;
}
.status-box {
  display: flex;
}
.status-item {
  padding: 5px 26px;
  border: 1px solid #d9d9d9;
  cursor: pointer;
  &:last-child {
    border-left: none;
  }
}
.active {
  background-color: @primary-color;
  color: #fff;
}*/
</style>
